<!DOCTYPE HTML>
<html lang="en" xml:base="">

<head>
    <meta charset="utf-8">
    <title>个人信息页</title>
    <th:block th:insert="~{sys/common/include::head}"></th:block>

</head>

<body>

<aside th:replace="~{sys/common/include::aside}"></aside>
<main class="main-wrap">
    <header th:insert="~{sys/common/include::main-header}"></header>
    <section class="content-main">
        <div class="content-header">
            <h2 class="content-title">个人账户 </h2>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="row gx-5">
                    <aside class="col-lg-3 border-end">
                        <nav class="nav nav-pills flex-lg-column mb-4">
                            <a class="nav-link active" aria-current="page" href="#">基础信息</a>

                        </nav>
                    </aside>
                    <div class="col-lg-9">
                        <section class="content-body p-xl-4">
                            <form>
                                <div class="row">
                                    <div class="col-lg-8">
                                        <div class="row gx-3">
                                            <div class="col-12  mb-3">
                                                <label class="form-label">账户名</label>
                                                <input class="form-control account-username" type="text" placeholder="请输入账户名">
                                            </div> <!-- col .// -->

                                            <div class="col-lg-12  mb-3">
                                                <label class="form-label">电话</label>
                                                <input class="form-control account-phone" type="text" placeholder="请输入电话">
                                            </div> <!-- col .// -->
                                            <div class="col-lg-12  mb-3">
                                                <label class="form-label">备注</label>
                                                <input class="form-control account-description" type="text" placeholder="请输入备注">
                                            </div> <!-- col .// -->
                                        </div> <!-- row.// -->
                                    </div> <!-- col.// -->
                                    <aside class="col-lg-4">
                                        <figure class="text-lg-center">
                                            <img class="img-lg mb-3 img-avatar" alt="用户头像">
                                            <figcaption>
                                                <button type="button" class="btn btn-light rounded font-md" id="avatar-upload-btn">
                                                    <i class="icons material-icons md-backup font-md "></i> 上传
                                                </button>
                                            </figcaption>
                                        </figure>
                                    </aside> <!-- col.// -->
                                </div> <!-- row.// -->
                                <br>
                                <button class="btn btn-primary account_change" type="button">保存修改</button>
                            </form>
                            <hr class="my-5">
                            <div class="row" style="max-width:920px">
                                <div class="col-md">
                                    <article class="box mb-3 bg-light">
                                        <a class="btn float-end btn-light btn-sm rounded font-md account_change" >修改</a>
                                        <h6>密码</h6>
                                        <small class="text-muted d-block" style="width:70%">点击此处重置或更改你的密码</small>
                                    </article>
                                </div> <!-- col.// -->
                                <div class="col-md">
                                    <article class="box mb-3 bg-light">
                                        <a class="btn float-end btn-light rounded btn-sm font-md account_remove"
                                           href="#">注销</a>
                                        <h6>移除账户</h6>
                                        <small class="text-muted d-block" style="width:70%">删除你的账户，请注意此操作无法撤销</small>
                                    </article>
                                </div> <!-- col.// -->
                            </div> <!-- row.// -->
                        </section> <!-- content-body .// -->
                    </div> <!-- col.// -->
                </div> <!-- row.// -->
            </div> <!-- card body end// -->
        </div> <!-- card end// -->
    </section> <!-- content-main end// -->
    <footer class="main-footer font-xs">
        <div class="row pb-30 pt-15">
            <div class="col-sm-6">
                <script>
                    document.write(new Date().getFullYear())
                </script>
                ©, Viva商城 .
            </div>
            <div class="col-sm-6">
                <div class="text-sm-end">
                    All rights reserved
                </div>
            </div>
        </div>
    </footer>
</main>
<div th:insert="~{sys/common/include::scripts}"></div>
<script th:src="@{/assets/sys/common/js/account.js}"></script>
</body>

</html>